<template>
	<view class="banner-swiper-box">
		<canvas canvas-id="colorThief" class="hide-canvas"></canvas>
		<swiper class="banner-carousel Shop-selector-rect" circular @change="swiperChange" :autoplay="true">
			<swiper-item v-for="(item, index) in detail" :key="index" class="carousel-item">
				<!-- <navigator url=item.uniapp_url> -->

				<image class="swiper-image " :src="item.pic" @click="goRoll(item)" mode="widthFix" lazy-load></image>
				<!-- </navigator> -->
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
import colorThief from 'miniapp-color-thief';

export default {
	data() {
		return {
			swiperCurrent: 0, //轮播下标
			webviewId: 0
		};
	},
	props: {
		detail: {
			type: Array,
			default: []
		}
	},
	created: async function() {
		await this.doColorThief();
	},
	computed: {},
	methods: {
		async doColorThief() {
			let that = this;
			// console.log('ppppppppppp',item.position);
			// 获取轮播图

			// if(this.detail.position=='1'){
			let item = this.detail[this.swiperCurrent];
			// }
			// console.log('!!!!!!!!!!!!!!!!!!', this.detail);
			//console.log('ppppppppppp',item.position);
			// 获取轮播图颜色
			let bgcolor = item.color;
			// 颜色不存在#c40414
			if (bgcolor === '') {
				that.$set(item, 'bgcolor', '#ffffff');
				that.$emit('getbgcolor', '#ffffff');
			} else {
				that.$set(item, 'bgcolor', bgcolor);
				that.$emit('getbgcolor', bgcolor);
			}
		},
		swiperChange(e) {
			this.swiperCurrent = e.detail.current;
			this.doColorThief();
			let bgcolor = this.detail[this.swiperCurrent].bgcolor;
			this.$emit('getbgcolor', bgcolor);
		},

		// 路由跳转
		goRoll(item) {
			// uni.navigateTo({
			// 	url: item.uniapp_url
			// });
			//            if (item.uniapp_url) {
			if (item.tzlx == '1') {
				this.$yrouter.push({
					path: '/pages/shop/GoodsCon/index',
					query: {
						id: item.uniapp_url
					}
				});
			} else {
				this.$yrouter.push({
					path: '/pages/shop/GoodsList/index',
					query: {
						merId: item.uniapp_url
					}
				});
			}
			// this.$yrouter.push(item.uniapp_url)
			//            }
			// if(item.url){

			// 	window.location.href=item.url;
			// 	this.$yrouter.push({
			// 		path: "/pages/shop/GoodsCon/other",
			// 		query: {
			// 			url: encodeURIComponent(item.url),
			// 		},
			// 	})
			// }
		}
	}
};
</script>

<style lang="less">
// 轮播
.banner-swiper-box {
	background: none;
}

.banner-swiper-box,
.banner-carousel {
	width: 97%;
	height: 350upx;
	margin: auto;
	
	// height: 300rpx;

	.carousel-item {
		width: 100%;
		height: 100%;
		// padding: 0 28upx;
		overflow: hidden;
	}

	.swiper-image {
		width: 100%;
		height: 100% !important;
		border-radius: 15rpx;
		// border-radius: 10upx;
		// background: #ccc;
	}
}

.banner-swiper-dots {
	display: flex;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	top: 620rpx;
	.banner-dot {
		width: 14rpx;
		height: 14rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.banner-dot-active {
		width: 14rpx;
		height: 14rpx;
		background: #a8700d;
		border-radius: 50%;
		margin-right: 10rpx;
	}
}

.hide-canvas {
	position: fixed !important;
	top: -99999upx;
	left: -99999upx;
	z-index: -99999;
}
</style>
